<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=cp1251"/>
		<title>Примеры CSS</title>
		<style>
		#container {
			width:800px;
			margin: 0 auto;
			font-family: Verdana;
		}
		#header {
			background-color:purple;
			padding:10px;
			color:white;
		}
		#header h1 a{
			text-decoration:none;
			color:white;
		}
		/*
		div {
			border: 1px solid black;
		}
		*/
		#leftcol {
			width: 200px;
			float: left;
			border-right:1px dashed black;
		}
		#rightcol {
			margin-left:220px;
		}
		#footer {
			text-align: center;
			clear: both;
		}
		
		#rightcol h2 {
			text-align: center;
		}
		div.center {
			text-align:center;
		}
		#nav ul {
			list-style-type: none;
			
		}
		#nav {
			background-color:#0000cc;
		}
		#nav ul li {
			float:left;
			margin-right:50px;
			margin-top:10px;
			margin-bottom:10px;
		}
		#nav a {
			text-decoration:none;
			color:white;
			font-weight:bold;
		}
		#nav a:hover {
			text-decoration:none;
			color:yellow;
			font-weight:bold;
		}
		div.clear {
			clear:both;
		}
		</style>
	</head>	
	<body>
	<div id="container">
		<div id="header">
			<h1><a href="/">ПРимер CSS вёрстки</a></h1>
		</div>
		<div id="nav">
			<ul>
				<li><a href="exmaple.com">main</a></li>
				<li><a href="exmaple.com">contants</a></li>
				<li><a href="exmaple.com">info</a></li>
				<li><a href="exmaple.com">guest book</a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<div id="leftcol">
			<ul>
				<li><a href="exmaple.com">main</a></li>
				<li><a href="exmaple.com">contants</a></li>
				<li><a href="exmaple.com">info</a></li>
				<li><a href="exmaple.com">guest book</a></li>
			</ul>
			<ul>
				<li><a href="exmaple.com">main</a></li>
				<li><a href="exmaple.com">contants</a></li>
				<li><a href="exmaple.com">info</a></li>
				<li><a href="exmaple.com">guest book</a></li>
			</ul>
			<ul>
				<li><a href="exmaple.com">main</a></li>
				<li><a href="exmaple.com">contants</a></li>
				<li><a href="exmaple.com">info</a></li>
				<li><a href="exmaple.com">guest book</a></li>
			</ul>
			<ul>
				<li><a href="exmaple.com">main</a></li>
				<li><a href="exmaple.com">contants</a></li>
				<li><a href="exmaple.com">info</a></li>
				<li><a href="exmaple.com">guest book</a></li>
			</ul>
			<ul>
				<li><a href="exmaple.com">main</a></li>
				<li><a href="exmaple.com">contants</a></li>
				<li><a href="exmaple.com">info</a></li>
				<li><a href="exmaple.com">guest book</a></li>
			</ul>
			
		</div>
		<div id="rightcol">
			<h2>Название статьи</h2>
			<p> Очень много текста  Очень много текста Очень много текста
			 Очень много текста Очень много текста Очень много текста Очень много текста
			  Очень много текста Очень много текста Очень много текста Очень много текста
			   Очень много текста Очень много текста Очень много текста
			</p>
				<div class="center">
				<img src="http://upload.wikimedia.org/wikipedia/ru/math/3/c/a/3ca857f705daba6b9e6e6d3ccad7990f.png" />
				</div>
			
			<p> Очень много текста  Очень много текста Очень много текста
			 Очень много текста Очень много текста Очень много текста Очень много текста
			  Очень много текста Очень много текста Очень много текста Очень много текста
			   Очень много текста Очень много текста Очень много текста
			</p>
		</div>
		<div id="footer">
			cc-by 2012 Filonov Pavel
		</div>
	</div>
</body>
</html>